<template>
	<view class="my-shop-add-wp">
		<view class="my-shop-add-form">
			<u--form errorType="message" labelPosition="top" :model="model" :rules="rules" ref="form" labelWidth='180'
				labelAlign='left' :labelStyle="{fontSize: '26rpx',color: '#1D2129',height:'80rpx',lineHeight:'80rpx'}"
				:borderBottom="true">

				<u-form-item label="大礼包名称" prop="name" borderBottom class='formItemWp'>
					<u--input placeholder="请输入大礼包名称(20字内)" maxlength="20"
						suffixIconStyle="color: #909399;font-size:30rpx" border="none" v-model="model.name" clearable>
					</u--input>
				</u-form-item>
				<u-form-item labelWidth='580' labelPosition="left" label="是否赠送" prop="" :borderBottom="false"
					class='formItemWp'>
					<u-switch v-model="model.give" size="40" :activeValue="1" :inactiveValue="0"></u-switch>
				</u-form-item>
				<u-form-item label="大礼包价格" prop="price" borderBottom class='formItemWp' v-if="model.give==0">
					<u--input type="number" placeholder="请输入大礼包价格" maxlength="8"
						suffixIconStyle="color: #909399;font-size:30rpx" border="none" v-model="model.price" clearable>
					</u--input>
				</u-form-item>
				<view class="coupon-title">
					大礼包封面
				</view>
				<view class="img-list-box">
					<scroll-view style="white-space: nowrap;" :scroll-x="true" :scroll-with-animation="true">
						<view :id="`id-${index}`" class="img-list-item" v-for="(item,index) in imgs" :key="index"
							@click="changeCardStyle(item,index)">
							<view class="img-list-mask" v-if="acvtiveIndex==index">
								<img style="opacity: 0.4;"
									src="https://file.casugn.com/storecompcard//vDMG9DF1LOKpd0662a88acafe3f7ebf33a8d7107ac08_1663641032654.png"
									alt="">
							</view>
							<img class="img-item" :src="item.image" alt="">
						</view>
					</scroll-view>
				</view>
				<u-form-item labelWidth='550' labelPosition="left" label="大礼包商品" prop="" :borderBottom="false"
					class='formItemWp'>
					<u-button size="mini" text="添加商品" type="primary" @click="goToAddGoogs()"></u-button>
				</u-form-item>
			</u--form>
			<view class="goods">
				<view class="box-wp" v-if="msGiftProdList.length>0">
					<view class="item" v-for="(info,index) in msGiftProdList" :key="index">
						<view class="main">
							<view class="left">
								<u--image :src="info.pic" width="160rpx" height="160rpx" mode="aspectFill"></u--image>
							</view>
							<view class="right goods">
								<view class="title u-line-1">
									{{info.prodName ||""}}
								</view>
								<view class="cont-price">
									<view class="goods-price">
										{{info.price?`￥${info.price}`:''}}
									</view>
									<view class="">
										<u-number-box :min="1" :max="100" :step="1" v-model="info.totalStocks">
											<view slot="minus" class="minus">
												<u-icon name="minus" size="25"></u-icon>
											</view>
											<text slot="input"
												class="input">{{info.totalStocks?info.totalStocks:1}}</text>
											<view slot="plus" class="minus">
												<u-icon name="plus" size="25"></u-icon>
											</view>
										</u-number-box>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-box">
			<u-button v-if="hasPayInfo" :throttleTime="800" @click="submit" :custom-style="{
				  background: '#276aee',
				  color: '#fff',
				  width: '682rpx',
				  border:'none'
				}">提交</u-button>
			<u-button v-else :throttleTime="800" @click="goToAddPayInfo" :custom-style="{
				  background: '#276aee',
				  color: '#fff',
				  width: '682rpx',
				  border:'none'
				}">下一步 设置支付信息</u-button>
		</view>

	</view>


</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import baseConfig from '@/config/baseUrl.js'
	export default {
		data() {
			return {
				model: {
					name: '',
					price: '',
					status: 0,
					share: 0,
					give: 0
				},
				fileListImgs: [], //详情图
				rules: {
					name: [{
						required: true,
						message: '请输入商品名称',
						trigger: 'blur'
					}],

				},
				hasPayInfo: false,
				msGiftProdList: [],
				image: '', //封面
				acvtiveIndex: -1,
				imgs: [] //封面list

			}
		},
		onShow() {
			this.checkPayInfo()
		},
		onLoad() {
			this.getImgs()
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},

		computed: {
			...mapGetters(['userInfo']),
		},
		methods: {
			goToAddPayInfo() {
				uni.$u.route('/pagesMall/myShop/addPayInfo', {
					addPayInfo: 1
				});
			},
			async checkPayInfo() {
				const {
					openId
				} = this.userInfo
				let res = await this.$api.verifyExist({
					openId
				})
				if (res.success && res.code == 200) {
					this.hasPayInfo = res.result
				}
			},
			//获取图片素材
			async getImgs() {
				let res = await this.$api.getShopImgs({
					type: 2,
					pageNo: 1,
					pageSize: 30
				})
				if (res.success) {
					this.imgs = res.result.records || []
				}
			},
			changeCardStyle(item, index) {
				console.log(item, index)
				this.acvtiveIndex = index
				this.image = item.image
			},
			goToAddGoogs() {
				//携带已添加商品数据
				let list = JSON.stringify(this.msGiftProdList)
				uni.$u.route('/pagesMall/mallCenter/giftsAddGoods', {
					list
				});
			},


			submit() {

				if (!this.image) {
					return uni.showToast({
						icon: 'none',
						title: '请选择商品封面'
					})
				}
				if (!this.msGiftProdList || this.msGiftProdList.length == 0) {
					return uni.showToast({
						icon: 'none',
						title: '请选择并添加商品'
					})
				}
				const {
					openId,

				} = this.userInfo
				this.$refs.form.validate().then(async res => {
					let msGiftProdList = this.msGiftProdList.map(item => {
						item["prodId"] = item["id"]
						delete item["id"]
						return item
					})
					let payload = {
						image: this.image,
						openId,
						...this.model,
						msGiftProdList
					}
					let res2 = await this.$api.createGiftPacks(payload)
					console.log(res2, 'res2');
					if (res2.success) {
						uni.showToast({
							title: '添加成功'
						})
						uni.navigateBack()
					} else {
						uni.showToast({
							title: res2.message,
							icon: 'none'
						});
					}
				}).catch(errors => {
					uni.$u.toast('请补充完整所需项')
				})

			},

		}
	}
</script>


<style lang="scss" scoped>
	::v-deep .u-upload .uicon-close {
		font-size: 24rpx !important;
		top: 6rpx !important;
	}

	page {
		height: 100%;
		background-color: #f7f8fa;
	}

	.my-shop-add-wp {
		padding-bottom: 200rpx;
		overflow: auto;
		min-height: 100vh;

		.my-shop-add-form {
			margin: 32rpx;

			.coupon-title {
				width: 130rpx;
				height: 80rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #1D2129;
				line-height: 80rpx;

			}

			.goods {
				.box-wp {
					overflow: auto;



					.item {
						background-color: #fff;
						margin-top: 20rpx;

						.main {
							display: flex;
							justify-content: space-between;

							.left {
								margin-top: 5rpx;
								margin-right: 32rpx;

								image {
									border-radius: 5rpx;
									width: 140rpx;
									height: 140rpx;
								}
							}

							.right {
								flex: 1;


								.title {
									overflow: hidden;
									width: 450rpx;
									height: 40rpx;
									font-size: 28rpx;
									font-weight: 600;
									color: #1D2129;
								}

								.cont-price {

									height: 70rpx;
									display: flex;
									align-items: center;
									justify-content: space-between;

									.minus {
										width: 56rpx;
										height: 56rpx;
										border-radius: 50%;
										display: flex;
										justify-content: center;
										align-items: center;
										background-color: #f7f8fa;
										color: #000;
									}

									.input {
										padding: 0 30rpx;
										color: #000;
									}

									.count {
										height: 40rpx;
										font-size: 28rpx;
										font-weight: 400;
										color: #86909C;
										line-height: 39rpx;
									}

									.goods-tag {
										border-radius: 6rpx;
										border: 1rpx solid #FF7D00;
										padding: 4rpx 10rpx;
										margin-left: 20rpx;
										text-align: center;
										width: 100rpx;
										height: 28rpx;
										font-size: 20rpx;
										font-weight: 400;
										color: #FF7D00;
										line-height: 28rpx;

									}

									.goods-price {
										color: #FF3131;
										font-size: 34rpx;
									}
								}

								.option-btn-wp {
									display: flex;
									justify-content: flex-end;
									align-items: center;

									.option-btn {
										text-align: center;
										width: 112rpx;
										height: 48rpx;
										border-radius: 200rpx 200rpx 200rpx 200rpx;
										opacity: 1;
										border: 2rpx solid #86909C;
										font-size: 24rpx;
										font-weight: 400;
										color: #86909C;
										line-height: 48rpx;
										margin-left: 20rpx;

									}


								}




							}
						}

						.bottom {
							.sell-box {
								margin-top: 24rpx;

								.sell-box-name {
									height: 40rpx;
									font-size: 28rpx;
									font-weight: 400;
									color: #4E5969;
									line-height: 39rpx;
								}

								.sell-box-name2 {
									height: 40rpx;
									font-size: 28rpx;
									font-weight: 600;
									color: #1D2129;
									line-height: 39rpx;
								}
							}

							.time-box {
								margin-top: 24rpx;

								.time {
									height: 40rpx;
									font-size: 28rpx;
									font-weight: 400;
									color: #86909C;
									line-height: 39rpx;
								}

								.detail {
									height: 40rpx;
									font-size: 28rpx;
									font-weight: 400;
									color: #276AEE;
									line-height: 39rpx;
								}
							}

						}




					}

				}
			}

			.img-list-box {
				display: flex;
				overflow-x: scroll;
				flex-wrap: nowrap;



				.img-list-item {
					display: inline-block;
					position: relative;
					margin-right: 32rpx;

					.img-list-mask {
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;

						background: rgba(0, 0, 0, 0.5);
						text-align: center;

						img {
							width: 50upx;
							height: 50upx;
							position: relative;
							top: 50%;
							transform: translateY(-25upx);
						}
					}

					.img-item {
						width: 218rpx;
						height: 218rpx;

					}
				}

				.img-list-item:last {
					margin-right: 0;
				}

			}

		}


	}
</style>